<template>
  <div class="content-container">
    <el-row :gutter="4" class="row-wrap">
      <el-col :span="24">
        <div class="chart-title-container four-border-blueBg">
          <span class="chart-title">总览</span>
          <el-dropdown split-button type="primary" @click="handleClick">
            租户
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>店面1</el-dropdown-item>
                <el-dropdown-item>店面2</el-dropdown-item>
                <el-dropdown-item>店面3</el-dropdown-item>
                <el-dropdown-item>店面4</el-dropdown-item>
                <el-dropdown-item>店面5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">菜系分布</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart />
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">菜谱类型</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart />
        </div>
      </el-col>
      <el-col :span="24" :lg="8" :xl="8">
        <div class="wrap-title">设备类型</div>
        <div class="chart-wrapper four-border-blueBg">
          <PieChart />
        </div>
      </el-col>
      <el-col :span="24">
        <div
          class="chart-title-container four-border-blueBg"
          style="margin-top: 10px"
        >
          <span class="chart-title">烹饪分析</span>
          <span>
            <el-dropdown split-button type="primary" @click="handleClick">
              租户
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              店面
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              周
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天烹饪菜品总数量/份</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart type="1" />
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天烹饪数量最多菜品/份</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart type="2" />
        </div>
      </el-col>
      <el-col :span="24">
        <div
          class="chart-title-container four-border-blueBg"
          style="margin-top: 10px"
        >
          <span class="chart-title">设备分析</span>
          <span>
            <el-dropdown split-button type="primary" @click="handleClick">
              租户
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              店面
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              周
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>店面1</el-dropdown-item>
                  <el-dropdown-item>店面2</el-dropdown-item>
                  <el-dropdown-item>店面3</el-dropdown-item>
                  <el-dropdown-item>店面4</el-dropdown-item>
                  <el-dropdown-item>店面5</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天工作总时长/分钟</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart type="3" />
        </div>
      </el-col>
      <el-col :span="24" :lg="12" :xl="12">
        <div class="wrap-title">每天工作最长时间设备/分钟</div>
        <div class="chart-wrapper four-border-blueBg">
          <BarChart type="4" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PieChart from './component/PieChart.vue'
import BarChart from './component/BarChart.vue'

const listParams = ref({
  name: '',
  type: '',
  model: '',
  status: ''
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
// 弹框参数
const batchImportVisible = ref(false)
const rowId = ref('')
const addOrEditType = ref('add')
const addOrEditVisible = ref(false)
const detailVisible = ref(false)

onMounted(() => {
  getTableList()
})

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.recipe
    .apiRecipeList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...listParams.value
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

const handleReset = () => {
  listParams.value = {
    name: '',
    type: '',
    model: '',
    status: ''
  }
  handleQuery()
}
const handleImport = () => {
  batchImportVisible.value = true
}

const handleCreate = () => {
  addOrEditVisible.value = true
  addOrEditType.value = 'add'
}

const handleDetailDialog = row => {
  detailVisible.value = true
  rowId.value = row.id
}

const handleEditDialog = row => {
  addOrEditVisible.value = true
  addOrEditType.value = 'edit'
  rowId.value = row.id
}

const handleDisableDialog = row => {
  ElMessageBox.confirm(
    g_t('recipe.confirmDisableRecipe', { name: row.name }),
    g_t('public.tip'),
    {
      confirmButtonText: g_t('public.confirm'),
      cancelButtonText: g_t('public.cancel'),
      type: 'warning'
    }
  )
    .then(() => {
      loading.value = true
      g_api.recipe
        .apiRecipeUpdate({
          id: row.id,
          status: 2
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => {})
}

const handleEnableDialog = row => {
  loading.value = true
  g_api.recipe
    .apiRecipeUpdate({
      id: row.id,
      status: 1
    })
    .then(res => {
      if (res.code === '200') {
        ElMessage.success(res.message)
        handleQuery()
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleDelete = row => {
  ElMessageBox.confirm(`是否删除该菜谱【${row.name}】?`, g_t('public.tip'), {
    confirmButtonText: g_t('public.confirm'),
    cancelButtonText: g_t('public.cancel'),
    type: 'warning'
  })
    .then(() => {
      loading.value = true
      g_api.recipe
        .apiRecipeDelete({
          id: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.content-container {
  min-height: 100%;
  height: auto;
}
.chart-title-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background-color: #fff;
}
.chart-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-333);
}
.wrap-title {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-333);
  text-align: center;

  &:before {
    content: '';
    width: 4px;
    height: 20px;
    margin-right: 10px;
    background: var(--color-primary-green);
    border-radius: 4px;
  }
}
</style>
